<template>
	<view>
		<view class="page-head">
			<view class="scroll-item" @click="topicTypeClick(0)" :class="{ active: topicIdx == 0 }">最新</view>
			<view class="scroll-item" @click="topicTypeClick(1)" :class="{ active: topicIdx == 1 }">热门</view>
		</view>
		<view class="container">
			<view class="topic-list pt40">
				<block v-if="topicIdx == 0">
					<navigator :url="'/pages/topic_detail/topic_detail?topic_id=' + item.id" hover-class="none" class="item flex-box mb30" v-for="(item, index) in topicList" :key="item.id">
						<image class="mr20 img" :src="item.image" mode="aspectFill" lazy-load></image>
						<view class="flex-1">
							<view class="title mb40 m-ellipsis" v-cloak>{{ item.name }}</view>
							<view class="fs24 col-9 flex-1">{{ item.forumuser_count }}参与 {{ item.forum_count }}动态</view>
						</view>
						<view class="btn1">参与讨论</view>
					</navigator>
				</block>
				<block v-if="topicIdx == 1">
					<block v-for="(item, index) in topicList">
						<navigator :url="'/pages/topic_detail/topic_detail?topic_id=' + item.id" hover-class="none" class="item flex-box mb30" :key="item.id" v-if="item.top_status == 1">
							<image class="mr20 img" :src="item.image" mode="aspectFill" lazy-load></image>
							<view class="flex-1">
								<view class="title mb40 m-ellipsis" v-cloak>{{ item.name }}</view>
								<view class="fs24 col-9 flex-1">{{ item.forumuser_count }}参与 {{ item.forum_count }}动态</view>
							</view>
							<view class="btn1">参与讨论</view>
						</navigator>
					</block>
				</block>
				<view class="g-btn3-wrap" @click="getTopicList()">
					<view class="g-btn3" :class="{ nomore: topicMore.nomore == true || topicMore.loading == true }">{{ topicMore.text }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require('../../xiluedu/util.js');
export default {
	data() {
		return {
			topicIdx: 0,
			topicList: [],
			topicMore: { page: 1 }
		};
	},
	onLoad() {
		this.getTopicList();
	},
	onPullDownRefresh() {
		this.getTopicList();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	methods: {
		getTopicList() {
			util.fetch(this, 'xiluedu.topic/lists', { pagesize: 10 }, 'topicMore', 'topicList', 'data', data => {
				this.forumList = data;
				console.log(data);
			});
		},
		topicTypeClick(idx) {
			this.topicIdx = idx;
		}
	}
};
</script>

<style scoped>
.page-head {
	padding: 0 30rpx;
	height: 100rpx;
	overflow-x: scroll;
	white-space: nowrap;
	background-color: #fff;
	border-bottom: 1rpx solid #efefef;
}
.page-head .scroll-item {
	display: inline-block;
	line-height: 100rpx;
	font-size: 32rpx;
	color: #333333;
}
.page-head .scroll-item.active {
	font-weight: bold;
}
.page-head .scroll-item + .scroll-item {
	margin-left: 55rpx;
}
.container {
	padding: 100rpx 30rpx 30rpx;
}
.topic-list .img {
	display: block;
	width: 122rpx;
	height: 122rpx;
	border-radius: 10rpx;
}
.topic-list .title {
	position: relative;
}
/* .topic-list .title::before {
	content: '#';
}
.topic-list .title::after {
	content: '#';
} */
.topic-list .btn1 {
	width: 130rpx;
	height: 44rpx;
	border: 1px solid #ed1f34;
	border-radius: 4rpx;
	font-size: 24rpx;
	font-weight: 500;
	color: #ed1f34;
	line-height: 44rpx;
	text-align: center;
}
</style>
